<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="searchForm" class="header-area" :model="searchForm" label-width="90px" style="height: auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="商户类型" prop="merchantType">
							<el-select v-model="searchForm.merchantType" placeholder="选择商户类型" style="width: 100%;">
								<el-option value="" label="全部"></el-option>
								<el-option value="platform" label="平台"></el-option>
								<el-option value="shop" label="商家"></el-option>
								<el-option value="supplier" label="供应商"></el-option>
								<el-option value="foundation" label="基金会"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" @click="submitSearch">查询</el-button>
							<el-button type="primary" plain @click="resetSearch">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<!-- 表格 -->
		<template>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				
				<el-table-column label="商户类型" prop="merchantType" align="center">
					<template slot-scope="scope">
						<el-tag type="warning" v-if="scope.row.merchantType == 'platform'">平台</el-tag>
						<el-tag type="success" v-if="scope.row.merchantType == 'shop'">商家</el-tag>
						<el-tag v-if="scope.row.merchantType == 'supplier'">供应商</el-tag>
						<el-tag type="danger" v-if="scope.row.merchantType == 'foundation'">基金会</el-tag>
					</template>
				</el-table-column>
				
				<!-- <el-table-column label="商户业务ID" prop="bizId"></el-table-column> -->
				<el-table-column label="市场商家编号" prop="mktMrchId" width="180"></el-table-column>
				<el-table-column label="市场商家名称" prop="mktMrchNm" width="180"></el-table-column>
				<el-table-column label="商家柜台号码" prop="mrchCnterCd" width="160"></el-table-column>
				<el-table-column label="POS编号" prop="posNo" width="160"></el-table-column>
				
				<el-table-column label="联系人" prop="ctcpsnNm" width="160"></el-table-column>
				<el-table-column label="手机号码" prop="mblphNo" width="160"></el-table-column>
				
				<el-table-column label="创建时间" prop="createTime" width="160" :formatter="forDate"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="195">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="viewDetail(scope.row)">查看详情</el-button>
						<el-button type="warning" size="small" @click="viewRelatedMerchant(scope.row)">关联商家</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="searchForm.page"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="searchForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<merchant-detail-dialog
				:isShow="showDetailDialog"
				:item="currentItem"
				@close="closeDetailDialog"
			></merchant-detail-dialog>
			
			<merchant-related-dialog
				:isShow="showRelatedMerchantDialog"
				:item="currentItem"
				@close="closeRelatedMerchantDialog"
			></merchant-related-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getAccountList } from '@api/profitAllocation/profitAllocation'
	import merchantDetailDialog from './components/merchant-detail-dialog'
	import merchantRelatedDialog from './components/merchant-related-dialog'
	import dayjs from 'dayjs'
	export default {
		components: {
			merchantDetailDialog,
			merchantRelatedDialog,
		},
		data() {
			return {
				searchForm: {
					merchantType: '',
					page: 1,
					pageSize: 10,
				},
				
				tableData: [],
				total: 0,
				
				showDetailDialog: false,
				showRelatedMerchantDialog: false,
				currentItem: {},
			}
		},
		methods: {
			getData() {
				getAccountList(this.searchForm)
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
					})
			},
			handleSizeChange(val) { //处理显示条数
				this.searchForm.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) { //处理翻页
				this.searchForm.page = val;
				this.getData();
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'createTime') {
					return row.createTime ? dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '';
				}
			},
			
			submitSearch() { //搜索
				this.searchForm.page = 1;
				this.getData();
			},
			resetSearch() {
				this.$refs.searchForm.resetFields();
				this.searchForm.page = 1;
				this.getData();
			},
			
			viewDetail(item) {
				this.currentItem = item;
				this.showDetailDialog = true;
			},
			closeDetailDialog() {
				this.showDetailDialog = false;
			},
			
			viewRelatedMerchant(item) {
				this.currentItem = item;
				this.showRelatedMerchantDialog = true;
			},
			closeRelatedMerchantDialog() {
				this.showRelatedMerchantDialog = false;
			}
		},
		mounted() {
			this.getData();
		}
	}
</script>

<style>
</style>